<!-- 玩家RTP控制 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize" 
  @changePage="changePage" @search="getSearchList" @reset="resetDetails" @changeTh="data.dialogVisible = true">
    <template #form>
      <Operator ref="OperatorRef" @query="queryItem" />
      <el-form-item label="游戏：">
        <el-select v-model="data.query.game_id" placeholder="请选择" filterable>
          <el-option label="全部" :value="-1" />
          <el-option v-show="item.type == 1?true:false" v-for="item in indexStore.gameArray" :key="item.value"
            :label="'【' + item.value + '】' + item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </template>
    <template #button></template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width" show-overflow-tooltip>
          <template v-if="item.prop == 'agent_id'" #default="scope">
            {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
          </template>
          <template v-if="item.prop == 'game_id'" #default="scope">
            <div class="gameIcon">
              <div><img class="game-icon" :src="selectToLabel(GAMEICON, scope.row.game_id)" alt=""></div>
              {{ selectToLabel(indexStore.gameArray, scope.row.game_id) }}
            </div>
          </template>
          <template v-if="item.prop == 'game_type'" #default="scope">
            <el-tag>{{ selectToLabel(GAMETYPE, scope.row.game_type) }}</el-tag>
          </template>
          <template v-if="item.prop == 'a_rtp_check'" #default="scope">
            {{ scope.row.pg_game.a_rtp_check }}
          </template>
          <template v-if="item.prop == 'a_rtp_control_cfg'" #default="scope">
            <div v-for="(second,two) in scope.row.controlList" :key="two">
              配置 <span class="colorRed">{{ two+1 }}</span>：{{ second.min }}% ~ {{ second.max }}%,{{ second.weight }}%概率,使用{{ second.rtp }}%表
            </div>
          </template>
          <template v-if="item.prop == 'a_rtp_setting'" #default="scope">
            <div v-for="(second,two) in scope.row.setList" :key="two">
              {{ second.min }}% ~ {{ second.max }}%
            </div>
          </template>
          <template v-if="item.prop == 'a_rtp_control'" #default="scope">
            <el-tag :type="scope.row.pg_game.a_rtp_control?'success':'danger'">{{ selectToLabel(DEMOPLAY, scope.row.pg_game.a_rtp_control) }}</el-tag>
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template #default="scope">
          <el-button type="warning" v-permiss="'/system/destroyManager'" size="small"
            @click="checkDetails(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>

  <!-- 调控配置 -->
  <el-dialog v-model="data.isShowDetails" title="调控配置" :close-on-click-modal="false" :close-on-press-escape="false"
    width="61%" top="12vh" @close="onHideDetails">
    <div class="dialogMaxHeight" style="min-height: 500px;">
      <p class="box-title mustPass gameIcon marginB20">
        【{{ data.checkedItem.agent_id }}】 {{ selectToLabel(indexStore.agentArray, data.checkedItem.agent_id) }}
        <img class="game-icon marginL20" :src="selectToLabel(GAMEICON, data.checkedItem.game_id)" alt="">
        {{ selectToLabel(indexStore.gameArray, data.checkedItem.game_id) }}
      </p>
      <form-item title="玩家RTP检测执行局数" :pass="true" value="reason">
        <el-input-number v-model="data.formParams.a_rtp_check" :min="0" :max="99999999999999999999" :precision="0"
        placeholder="玩家RTP检测执行局数" clearable controls-position="right" />
      </form-item>
      <form-item title="状态" value="a_rtp_control">
        <el-radio-group v-model="data.formParams.a_rtp_control" size="large">
          <el-radio-button label="开启" :value="1" />
          <el-radio-button label="关闭" :value="0" />
        </el-radio-group>
      </form-item>
      <form-item title="白名单RTP" :pass="true" value="a_rtp_setting">
        <div class="flex margin5" v-for="(item, index) in data.setList" :key="index">
          RTP下限:
          <el-input-number :min="0" :max="99999999999999999999" :precision="0" class="width150 marginR10" v-model="item.min"
            placeholder="RTP下限" clearable controls-position="right" />%
          RTP上限:
          <el-input-number :min="0" :max="99999999999999999999" :precision="0" class="width150" v-model="item.max"
          placeholder="RTP上限" clearable controls-position="right" />%
        </div>
        <span class="tipsTextRed">(最新RTP在此范围的玩家不控制)</span>
      </form-item>
      <form-item title="调控配置" value="a_rtp_control_cfg" :subtract="true" @addItem="addControl">
        <div class="flexWrap margin5" v-for="(item, index) in data.controlList" :key="index">
          玩家RTP范围:
          <el-input-number v-model="item.min" :min="0" :max="99999999999999999999" :precision="2"
            class="width120 marginR5" placeholder="RTP下限" clearable :controls="false" />%
            -
          <el-input-number v-model="item.max" :min="0" :max="99999999999999999999" :precision="2"
            class="width120 marginR5" placeholder="RTP上限" clearable :controls="false" />%
          控制玩家概率:
          <el-input-number v-model="item.weight" :min="0" :max="100" :precision="2"
            class="width120 marginR5" placeholder="控制玩家概率" clearable :controls="false" />%
          使用RTP:
          <el-select class="selectWidth120" v-model="item.rtp" placeholder="请选择" filterable>
            <el-option v-for="second in data.checkedItem.rtpList" :key="second"
              :label="second" :value="second" />
            </el-select>
          <div class="reduce-btn marginL5" @click="reduceControl(index)">-</div>
        </div>
      </form-item>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onHideDetails">取消</el-button>
        <el-button type="primary" @click="gameSet">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onMounted, computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import FormItem from '@/components/FormItem/FormItem.vue'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { getGame, editTiger } from '@/api/game'
import { throttle, selectToLabel, setSemicolonToArr, setArrStr, setCommaToArr } from '@/utils/index'
import { BigHundred, BigTimeHundred } from '@/utils/math'
import { GAMEICON, GAMETYPE, DEMOPLAY } from '@/config/eunm'
import { useStore } from '@/stores/index'
const indexStore = useStore()
const data = reactive({
  type: 1,
  query: {
    page: 1,
    size: 50,
    game_type: 1,
    agent_id: -1,
    operated_id: -1,
    game_id: -1,
  },
  list: [],
  total: 0,
  fields: [
    { label: '商户昵称', prop: 'agent_id', width: '150', visible: true },
    { label: '游戏名称', prop: 'game_id', width: '200', visible: true },
    { label: '游戏类型', prop: 'game_type', width: '150', visible: true },
    { label: '玩家RTP检测执行局数', prop: 'a_rtp_check', width: '200', visible: true },
    { label: '功能状态', prop: 'a_rtp_control', width: '150', visible: true },
    { label: '调控配置', prop: 'a_rtp_control_cfg', width: '', visible: true },
    { label: '白名单RTP', prop: 'a_rtp_setting', width: '', visible: true },
  ],
  dialogVisible: false,
  checkedItem: {} as any,
  isShowDetails: false,
  formParams:{
    a_rtp_check: 0,
    a_rtp_control_cfg: '',
    a_rtp_setting: '',
    a_rtp_control: 0,
  },
  controlList: [] as any[],
  setList: [] as any[],
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  let query = JSON.parse(JSON.stringify(data.query))
  indexStore.setPageLoading(true)
  let res = await getGame(query)
  res.data?.list?.forEach((item:any) => {
    if(item.pg_game.a_slots_rtpshow){
      item.rtpList = setArrRtP(item.pg_game.a_slots_rtpshow)
    }
    if(item.pg_game.a_rtp_setting){
      item.setList = setArrSet(item.pg_game.a_rtp_setting)
    }
    if(item.pg_game.a_rtp_control_cfg){
      item.controlList = setArrControl(item.pg_game.a_rtp_control_cfg)
    }else{
      item.controlList = []
    }
  });
  indexStore.setPageLoading(false)
  data.list = res.data.list
  data.total = res.data.total
}

// 详情
const checkDetails = async (row: any) => {
  data.isShowDetails = true
  data.checkedItem = row
  data.controlList = JSON.parse(JSON.stringify(row.controlList))
  data.setList = JSON.parse(JSON.stringify(row.setList))
  data.formParams = JSON.parse(JSON.stringify(row.pg_game))
}

const gameSet = throttle(async () => {
  let query = JSON.parse(JSON.stringify(data.formParams));
  query.game_id = data.checkedItem.game_id
  query.agent_id = data.checkedItem.agent_id
  query.a_rtp_setting = setStrSet(data.setList)
  if(data.formParams.a_rtp_control && !data.controlList.length){
    return ElMessage.success('开启状态下必须保留一条配置')
  }
  query.a_rtp_control_cfg = setStrControl(data.controlList)
  let res = await editTiger(query,false);
  ElMessage.success('修改成功')
  onHideDetails(true)
}, 3000)

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
  getSearchList()
}
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 调控配置
const addControl = () => {
  data.controlList.push({ min: 0, max: 1, weight: 0, rtp: 70 })
}
const reduceControl = (index:number) => {
  if(data.formParams.a_rtp_control && !index && data.controlList.length == 1){
    return ElMessage.success('开启状态下必须保留一条配置')
  }
  data.controlList.splice(index, 1)
}

// 调控配置
const setArrControl= (str: string) => {
  let arr = [], newArr: any[] = []
  arr = setSemicolonToArr(str)
  arr?.forEach((item: any) => {
    newArr.push({
      min: BigHundred(item[0]),
      max: BigHundred(item[1]),
      weight: BigHundred(item[2]),
      rtp: BigHundred(item[3])
    })
  })
  return newArr
}
const setStrControl = (arr: any) => {
  let newArr: any[] = []
  arr?.forEach((item: any) => {
    newArr.push({
      min: BigTimeHundred(item.min),
      max: BigTimeHundred(item.max),
      weight: BigTimeHundred(item.weight),
      rtp: BigTimeHundred(item.rtp)
    })
  })
  return setArrStr(newArr)
}
// 白名单RTP
const setArrSet = (str: string) => {
  let arr = [], newArr: any[] = []
  arr = str.split(',')
  newArr.push({
    min: BigHundred(arr[0]),
    max: BigHundred(arr[1])
  })
  return newArr
}
const setStrSet = (arr: any) => {
  let newArr: any[] = []
  arr?.forEach((item: any) => {
    newArr.push({
      min: BigTimeHundred(item.min),
      max: BigTimeHundred(item.max),
    })
  })
  return setArrStr(newArr)
}
const setArrRtP = (str: string) => {
  let arr = [], newArr: any[] = []
    arr = setCommaToArr(str)
    arr.forEach((item: any) => {
      newArr.push(BigHundred(item))
    })
  return newArr
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const onHideDetails = (show: boolean) => {
  data.dialogVisible = false
  data.isShowDetails = false
  data.checkedItem = {} as any
  if (show) {
    data.query = {
      page: data.query.page,
      size: data.query.size,
      game_type: 1,
      agent_id: data.query.agent_id,
      operated_id: data.query.operated_id,
      game_id: data.query.game_id,
    }
    getSearchList()
  }
}
const OperatorRef = ref<any>()
const resetDetails = () => {
  data.query = {
    page: 1,
    size: 50,
    game_type: 1,
    operated_id: -1,
    agent_id: -1,
    game_id: -1,
  }
  OperatorRef.value.onHideDetails()
  getSearchList()
}
</script>

<style lang="scss" scoped></style>
